<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="/public/favicon.ico">
  <title>旅游信息网注册</title>
  <!-- 引入Element Plus样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <!-- 引入axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    .register-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
      padding: 20px;
    }

    .register-box {
      background: white;
      padding: 40px;
      border-radius: 15px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.1);
      width: 100%;
      max-width: 600px;
    }

    .register-title {
      text-align: center;
      color: #409EFF;
      margin-bottom: 30px;
      font-size: 28px;
    }

    .register-form {
      margin-top: 20px;
    }

    .btn-group {
      text-align: center;
      margin-top: 30px;
    }

    .submit-btn {
      width: 140px;
      height: 40px;
      font-size: 16px;
    }

    .el-form-item {
      margin-bottom: 25px;
    }

    .el-input {
      border-radius: 8px;
    }

    .el-radio {
      margin-right: 20px;
    }

    .el-slider {
      width: 90%;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="register-container">
      <div class="register-box">
        <h2 class="register-title">旅游用户注册</h2>
        <el-form 
          ref="ruleFormRef"
          :model="registerData"
          status-icon
          label-width="120px"
          class="register-form"
        >
        <el-form-item label="昵称：">
          <el-input v-model="registerData.nikeName" type="text" placeholder="请输入昵称"/>
        </el-form-item>
        
          <el-form-item label="密码：">
            <el-input v-model="registerData.password" type="password" placeholder="请输入密码"/>
          </el-form-item>

          <el-form-item label="确认密码：">
            <el-input v-model="registerData.rePassword" type="password" placeholder="请再次输入密码" @blur="rePwdPattern"/>
          </el-form-item>

          <el-form-item label="手机号：">
            <el-input v-model="registerData.phone" type="text" placeholder="请输入手机号" @blur="phonePattern"/>
          </el-form-item>

          <el-form-item label="邮箱：">
            <div style="display: flex; align-items: center;">
              <el-input v-model="registerData.email" type="text" placeholder="请输入邮箱" @blur="emailPattern" style="width: 350px;"/>
            </div>
            <el-button type="primary" v-if="emailCodeDisabled === true" @click="getEmailCode" style="margin-left: 10px;">获取验证码</el-button>
            <label v-if="emailCodeDisabled === false" style="margin-left: 10px;color: green;">验证码已发送！</label>
          </el-form-item>

          <el-form-item label="验证码：">
            <el-input v-model="registerData.emailCode" type="text" style="width: 150px;" placeholder="请输入邮箱验证码" @blur="emailCodePattern"/>
          </el-form-item>

          <el-form-item label="性别：">
            <el-radio-group v-model="registerData.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
              <el-radio label="3">保密</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="年龄：">
            <el-slider v-model="registerData.age" :min="1" :max="120"/>
          </el-form-item>

          <div class="btn-group">
            <el-button id="registerBtn" type="primary" class="submit-btn" @click="register">注册</el-button>
            <el-button type="primary" class="submit-btn" @click="goBack">返回主页</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>

  <!-- 引入Vue 3和Element Plus -->
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <script>
    const { createApp, reactive, ref } = Vue
    const { ElMessage } = ElementPlus
    const app = createApp({
      setup() {
        const registerData = reactive({
          password: '',
          rePassword: '',
          nikeName: '',
          phone: '',
          email: '',
          sex: '3',
          age: 1,
          emailCode: ''
        })

        const emailCodeDisabled = ref(true)

        const phonePattern = () => {
          if(registerData.phone === '' || registerData.phone.length !== 11){
            ElMessage({
              message: '手机号不能为空且必须为11位!',
              type: 'warning',
            })
          }else{
            var reg = RegExp("^1[3,5,7,8,9][0-9]{9}$");
            if(!reg.test(registerData.phone)){
              ElMessage({
                message: '手机号不合法!',
                type: 'warning',
              })
            }
          }
        }

        const emailPattern = () => {
          if(registerData.email === '' || registerData.email.length === 0){
            ElMessage({
              message: '邮箱不能为空!',
              type: 'warning',
            })
          }else{
            var reg = RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");
            if(!reg.test(registerData.email)){
              ElMessage({
                message: '邮箱不合法!',
                type: 'warning',
              })
            }
          }
        }

        const rePwdPattern = () => {
          if(registerData.rePassword !== registerData.password){
            ElMessage({
              message: '原始密码与确认密码不一致!',
              type: 'warning',
            })
          }
        }

        const register = () => {
          if (registerData.nikeName === '' || registerData.nikeName.length === 0) {
            ElMessage({
              message: '昵称不能为空！',
              type: 'warning',
            })
          }else if(registerData.password === '' || registerData.password.length === 0){
            ElMessage({
              message: '密码不能为空！',
              type: 'warning',
            })
          }else if(registerData.rePassword === '' || registerData.rePassword.length === 0){
            ElMessage({
              message: '确认密码不能为空！',
              type: 'warning',
            })
          }else if(registerData.phone === '' || registerData.phone.length !== 11){
            ElMessage({
              message: '手机号不能为空且长度必须为11位!',
              type: 'warning',
            })
          }else if(registerData.email === '' || registerData.email.length === 0){
            ElMessage({
              message: '邮箱不能为空!',
              type: 'warning',
            })
          }else{
            //发送注册请求前禁用按钮
            const registerBtn = document.querySelector('#registerBtn')
            registerBtn.disabled = true
            registerBtn.innerHTML = '注册中...'
            
            axios.post('/api/user/register', registerData)
              .then(response => {
                console.log(response)
                if(response.data.code === 200) {
                  ElMessage({
                    message: '注册成功!',
                    type: 'success',
                  })
                  //清除数据
                  clearRegisterData()
                  // 注册成功后延迟1秒跳转到主页
                  setTimeout(() => {
                    window.location.href = "/"
                  }, 1000)
                } else {
                  ElMessage({
                    message: response.data.message,
                    type: 'error',
                  })
                  //恢复按钮状态
                  registerBtn.disabled = false
                  registerBtn.innerHTML = '注册'
                }
              })
              .catch(error => {
                ElMessage({
                  message: error.response.data.message,
                  type: 'error',
                })
                console.error('注册错误:', error)
                //恢复按钮状态
                registerBtn.disabled = false
                registerBtn.innerHTML = '注册'
              })
          }
        }

        const clearRegisterData = () => {
          registerData.password = ''
          registerData.rePassword = ''
          registerData.nikeName = ''
          registerData.phone = ''
          registerData.email = ''
          registerData.sex = '3'
          registerData.age = 1
          registerData.emailCode = ''
        }

        const getEmailCode = () => {
          if(registerData.email === '' || registerData.email.length === 0){
            ElMessage({
              message: '邮箱不能为空!',
              type: 'warning',
            })
          }else{
            emailCodeDisabled.value = false
            axios.get('/api/user/mail/code', {
              params: {
                email: registerData.email
              }
            })
            .then(res => {
              if(res.data.code === 200){
                ElMessage({
                  message: '验证码获取成功注意查收!有效期5分钟',
                  type: 'success',
                })
              }else{
                ElMessage({
                  message: res.data.message,
                  type: 'error',
                })
              }
            })
            .catch(error => {
              ElMessage({
                  message: '获取失败，请稍后重试!',
                  type: 'error',
                })
              console.error('获取验证码错误:', error)
            })
            setTimeout(() => {
              emailCodeDisabled.value = true
            }, 10000)
          }
        }

        const goBack = () => {
          window.location.href = "/"
        }

        return {
          registerData,
          phonePattern,
          emailPattern,
          rePwdPattern,
          register,
          getEmailCode,
          emailCodeDisabled,
          goBack
        }
      }
    })
    app.use(ElementPlus)
    app.mount('#app')
  </script>
</body>
</html>
